<!--从业者-在线学习 -->
<template>
	<view class="recruitment-container">

		<!-- 图片轮播 -->
		<view class="wrap" v-show="topBannberShow">
			<u-swiper :list="swiperlist"></u-swiper>
		</view>
		<!-- 图文导航 -->
		<view class="dial-nav">
			<dial-nav marginTopLine='22rpx' imgSize='84rpx' :list="dialNavList" @click="changeUrldesc"></dial-nav>
		</view>

		<!--题库-->
		<view class="question">
			<text style="font-size: 16px;">题库</text>
			<text>对参加考证培训的学员开放（详见福利说明)</text>
		</view>

		<!-- 直播页面 -->
		<view class="livestrean">
			<view class="live-head" @click="allonling">
				<text class="head-left">在线直播</text>
				<text class="head-right">全部</text>
			</view>
			<view class="wrap">
				<u-swiper :list="swiperlist"></u-swiper>
			</view>
		</view>

		<!-- 顶部标签栏 -->
		<view class="onlineCourse-card">

			<u-tabs :list="tabs" :current="currentTab" @change="tabChange" active-color="#2979ff" inactive-color="#666"
				bar-width="120" :bold="true" :font-size="32"></u-tabs>

			<!-- 内容区域 -->
			<view class="content">
				<!-- 课程列表 -->
				<view v-if="onlinCourseList.length > 0">
					<view v-for="(item, index) in filteredJobs" :key="index" class="job-card">
						<view class="linecourse-card" @click="courseDetails(item.bc_code,item.isbuy)">
							<view class="linecourse-left">
								<view class="job-header">
									<img :src="item.bc_logo_uri[0].url" style="width: 144rpx; height: 192rpx;" alt="" />
								</view>
							</view>
							<view class="linecourse-right">
								<view class="job-header">
									<text class="job-title">{{ item.bc_name }}</text>
								</view>
								<view class="job-info">
									<text class="info-item">专业等级：{{ item.bc_zylevel }}</text>
								</view>
								<view class="job-info">
									<text class="info-item">讲师：{{ item.bct_namelist }}</text>
								</view>

								<view class="job-meta">
									<text class="info-head">48节</text>
									<text class="info-item">|</text>
									<text class="info-foot">¥{{ item.bc_price }}</text>
									<!-- <text class="status" :class="'status-' + job.status">{{ job.statusText }}</text> -->
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 空状态 -->
				<u-empty v-else mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" text="您还未发布招聘信息"
					margin-top="100"></u-empty>

					
			</view>
		</view>
		<!-- 引入客服悬浮按钮 -->
		<float-customer-service />

		<!-- 自定义tabtar -->
		<u-tabbar v-model="current" :show="show" :bg-color="bgColor" :border-top="borderTop" :list="list"
			:mid-button="midButton" :inactive-color="inactiveColor" :activeColor="activeColor" @change="change"></u-tabbar>

	</view>
</template>

<script>
	import FloatCustomerService from '@/components/FloatCustomerService.vue'
	import DialNav from '@/components/nav/dial-nav.vue';
	export default {
		components: {
			DialNav,
			FloatCustomerService
		},
		data() {
			return {
				topBannberShow: true,
				// 轮播
				swiperlist: [{
						image: "/static/banner/banner1.png",
						title: "昨夜星辰昨夜风，画楼西畔桂堂东",
					},
					{
						image: "/static/banner/banner2.png",
						title: "身无彩凤双飞翼，心有灵犀一点通",
					}
				],
				currentTab: 1, // 默认选中"我的招聘"		
				// 顶部导航
				dialNavList: [{
						img: require('static/icon_kecheng.png'),
						name: '在线课程',
						url: 'pages/Practitioner/onlinecourse/courselist',
						params: {}
					},
					{
						img: require('static/icon_tiku.png'),
						name: '练习题库',
						url: 'pages/Practitioner/question/question',
						params: {}
					},
					{
						img: require('static/icon_zhibo.png'),
						name: '名师直播',
						url: 'pages/Practitioner/teacherLive/teacherLive',
						params: {}
					},
					{
						img: require('static/icon_shizi.png'),
						name: '师资介绍',
						url: 'pages/Practitioner/teacherIntroduce/teacherIntroduce',
						params: {}
					},
				],
				// tab页
				currentTab: 0,
				tabs: [{
						name: '在线课程'
					},
					{
						name: '已购'
					},
					{
						name: '未购'
					}
				],
				jobList: [{
						id: 1,
						title: '康养师',
						salary: '6K~10K',
						location: '福州-鼓楼区',
						experience: '1-3年',
						createTime: '2025-05-23',
						status: 'draft',
						statusText: '未发布'
					},
					{
						id: 2,
						title: '康养师',
						salary: '6K~10K',
						location: '福州-鼓楼区',
						experience: '1-3年',
						createTime: '2025-05-23',
						status: 'published',
						statusText: '已发布'
					},
					{
						id: 3,
						title: '康养工程师',
						salary: '6K~10K',
						location: '福州-鼓楼区',
						experience: '1-3年',
						createTime: '2025-05-23',
						status: 'published',
						statusText: '已发布'
					}
				],
				// 在线课程列表
				onlinCourseList: [],
				// 按钮组中的样式写法
				customStyleObject: {
					marginRight: '20rpx',
					// margin-right: 20rpx;

				},
				// 底部tabtar
				current: 0,
				show: true,
				bgColor: '#F1F7F7',
				borderTop: true,
				list: '',
				midButton: false,
				inactiveColor: '#516178',
				activeColor: '#03B8CD'
			}
		},
		onLoad() {
			this.list = [{
					iconPath: "/static/xuexi_1.png",
					selectedIconPath: "/static/xuexi_2.png",
					text: '在线学习',
					count: 0,
					isDot: true,
					customIcon: false,
				},
				{
					iconPath: "/static/kaozheng_1.png",
					selectedIconPath: "/static/kaozheng_2.png",
					text: '考证培训',
					customIcon: false,
				},
				{
					iconPath: "/static/qiuzhi_1.png",
					selectedIconPath: "/static/qiuzhi_2.png",
					text: '个人求职',
					midButton: true,
					customIcon: false,
				},
				{
					iconPath: "/static/jingsai_1.png",
					selectedIconPath: "/static/jingsai_2.png",
					text: '职业竞赛',
					customIcon: false,
				},
				{
					iconPath: "/static/wode_1.png",
					selectedIconPath: "/static/wode_2.png",
					text: '我的',
					count: 0,
					isDot: false,
					customIcon: false,
				},
			]
			this.current = 0
		},
		onShow() {
			this.current = 0
			// 获取课程列表
			// this.$u.api.querycblist({
			// 	"bcstate": 1
			// }).then(res => {
			// 	console.log('课程列表：', res)
			// 	this.onlinCourseList = []
			// 	this.onlinCourseList = res.data.base_info
			// })
			// 加载顶部banner
			this.selectBanner()
			// 新课程列表接口
			this.getbcList()
		},
		computed: {
			// 按条件过滤是否发布的条件
			filteredJobs() {
				// 购买信息
				if (this.currentTab === 1) {
					return this.onlinCourseList.filter(job => job.isbuy === "1");
				} else if (this.currentTab === 2) {
					return this.onlinCourseList.filter(job => job.isbuy === "0");
				}
				return this.onlinCourseList;
			}
		},
		methods: {	
			// 切换底部tabBar
			change(index) {
				if (index == 0) {
					// 当前页为在线课程switchTab
					this.current = 0;
					uni.reLaunch({
						url: '/pages/Practitioner/learning/learning'
					});
				} else if (index == 1) {
					// 当前页为考证培训
					this.current = 1;
					uni.reLaunch({
						url: '/pages/Practitioner/examTrain/examTrain'
					});
				} else if (index == 2) {
					// 当前页为考证培训
					this.current = 2;
					uni.reLaunch({
						url: '/pages/Practitioner/applyJob/applyJob'
					});
				} else if (index == 3) {
					// 当前页为职业竞赛
					this.current = 3;
					uni.reLaunch({
						url: '/pages/Practitioner/prizeFight/prizeFight'
					});
				} else if (index == 4) {
					// 当前页为我的
					this.current = 4;
					uni.reLaunch({
						url: '/pages/Practitioner/mine/mine'
					});
				}

				// console.log("tabindex:", index)
				// uni.navigateTo({
				// 	url: '/pages/recruitment/create'
				// });
			},
			
			// 加载Banner
			selectBanner() {
				// 加载从业者端-在线学习页
				this.$u.api.querybannerlist().then(res =>{
					console.log('Banner:', res)
					// 判断发布的banner， 同时于判断从业者端的
					let baseinfo = res.data.base_info.filter(item => item.bkz_publishstate !==0)
					let filterBanner = baseinfo.filter(item => item.bbn_wz == '从业者端-在线学习页').sort((a, b) => a.bbn_px - b.bbn_px);
					if(filterBanner.length !== 0) {
						this.topBannberShow = true
						this.swiperlist = []						
						for(let i = 0; i< filterBanner.length; i++) {
							this.swiperlist.push({
								image: filterBanner[i].bbn_imguri[0].url,
								link: filterBanner[i].bbn_desc,
								title: filterBanner[i].bbn_wz,
							})
						}
					} else {
						this.topBannberShow = false
					}

					console.log('filterBanner:', this.swiperlist,this.topBannberShow)
					// swiperlist: [{
					// 		image: "/static/banner/banner1.png",
					// 		title: "昨夜星辰昨夜风，画楼西畔桂堂东",
					// 	},
					// 	{
					// 		image: "/static/banner/banner2.png",
					// 		title: "身无彩凤双飞翼，心有灵犀一点通",
					// 	}
					// ],
				})
			},
			
			// 跳转Banner
			changeUrldesc(index) {
				console.log('index:', index)
				const item = this.swiperlist[index];
				if (item && item.link) {
					console.log('index-1:', item.link)
					// this.navigateToPage(item.link);
					const linkpath = item.link.match(/"([^"]+)"/)[1];
					uni.navigateTo({
						url: linkpath
					});
				}
			},			
			
			// 新课程列表接口,根据用户获取
			getbcList() {
				this.$u.api.querybclist({
					"usercode": uni.getStorageSync('usercode')
				}).then(res =>{
					console.log('bclist:', res)
					this.onlinCourseList = []
					this.onlinCourseList = res.data.base_info
				})
			},
			// 跳转到直播全部
			allonling() {
				uni.navigateTo({
					url: `/pages/Practitioner/teacherLive/teacherLive`
				});
			},
			
			// 点击课程跳转到详情碳
			courseDetails(code,isbuy) {
				uni.navigateTo({
					url: `/pages/Practitioner/onlinecourse/coursedetails?bccode=${code}&isbuy=${isbuy}`
				});
			},
			tabChange(index) {
				this.currentTab = index;
			},
			createJob() {
				uni.navigateTo({
					url: '/pages/recruitment/create'
				});
			},
			editJob(id) {
				uni.navigateTo({
					url: `/pages/recruitment/edit?id=${id}`
				});
			},
			deleteJob(id) {
				uni.showModal({
					title: '提示',
					content: '确定删除该招聘信息吗？',
					success: (res) => {
						if (res.confirm) {
							this.jobList = this.jobList.filter(job => job.id !== id);
							uni.showToast({
								title: '删除成功',
								icon: 'success'
							});
						}
					}
				});
			},
			publishJob(id) {
				const job = this.jobList.find(job => job.id === id);
				if (job) {
					job.status = 'published';
					job.statusText = '已发布';
					uni.showToast({
						title: '发布成功',
						icon: 'success'
					});
				}
			},
			unpublishJob(id) {
				const job = this.jobList.find(job => job.id === id);
				if (job) {
					job.status = 'draft';
					job.statusText = '未发布';
					uni.showToast({
						title: '已下架',
						icon: 'success'
					});
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.recruitment-container {
		// height: 100vh;
		display: flex;
		flex-direction: column;
		// background-color: #f5f5f5;
		background: linear-gradient(to bottom, #CAEDEE, #F1F7F7);

		.wrap {
			margin: 0 10px;
			border-radius: 20rpx;
		}

		.dial-nav {
			margin: 10px;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			background-color: #fff;
		}

		.question {
			display: flex;
			background-color: #fff;
			border-radius: 16rpx;
			height: 50px;
			line-height: 50px;
			margin: 0 10px 10px 10px;

			text {
				padding-left: 20px;
			}
		}



		.livestrean {
			background-color: #fff;
			border-radius: 16rpx;
			margin: 0 10px 10px 10px;

			.live-head {
				display: flex;
				margin-bottom: 10px;
				font-size: 16px;
				justify-content: space-between;
				padding: 10px 20px;

			}
		}


		/deep/ .u-tabs {
			background-color: #fff;
			box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
			margin: 0 10px;
			// border-radius: 12rpx;
		}

		.onlineCourse-card {
			border-radius: 16rpx;
			/* 确保子元素也遵循圆角 */
			overflow: hidden;

			.content {
				flex: 1;
				// 滚动
				// overflow-y: auto;
				margin: 0 10px;
				// padding: 10rpx;

				.linecourse-card {
					display: flex;
				}

				.linecourse-left {
					width: 144rpx;
					height: 192rpx;
					border: #19be6b 1px solid;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					margin-right: 20rpx;
				}


				.job-card {
					background-color: #fff;
					// border-radius: 12rpx;
					padding: 30rpx;
					margin-bottom: 20rpx;

					.job-header {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 20rpx;

						.job-title {
							font-size: 30rpx;
							font-weight: bold;
							color: #333;
						}

						.job-salary {
							font-size: 24rpx;
							color: #ff6a00;
							font-weight: bold;
						}
					}

					.job-info {
						display: flex;
						align-items: center;
						margin-bottom: 20rpx;
						font-size: 26rpx;
						color: #666;

						.info-item {
							margin-right: 15rpx;

							&:last-child {
								margin-right: 0;
							}
						}
					}

					.job-meta {
						// display: flex;
						// justify-content: space-between;
						font-size: 24rpx;
						font-weight: bold;
						color: #999;
						// margin-bottom: 30rpx;
						// border-bottom: 1px solid #dfdfdf;
						// padding-bottom: 15rpx;
						
						.info-foot {
							
							color: #FA4646;
						}

						.info-item {
							margin: 0 15rpx;
						}

						.status {
							font-weight: bold;

							&.status-published {
								color: #19be6b;
							}

							&.status-draft {
								color: #ff9900;
							}
						}
					}

					.job-actions {
						display: flex;
						justify-content: flex-end;
					}
				}
			}
		}

		.publish-btn {
			padding: 20rpx;
			background-color: #fff;
			border-top: 1rpx solid #eee;
		}		
			
		.kong {
			 width: 100%;
			 height: 20rpx;
		}
	}
</style>